<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ leftCount }}</strong></span>
    <ul class="filters">
      <li>
            <!--  判断谁应该有高亮样式: 动态class
            用户点击要切换isSel里保存的值 -->
        <a @click="$emit('changeType','all')" :class="{selected: type==='all'}"  href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="$emit('changeType','no')" :class="{selected: type==='no'}"  href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="$emit('changeType','yes')" :class="{selected: type==='yes'}"  href="javascript:;">已完成</a>
      </li>
    </ul>
    <button
    class="clear-completed"
    v-show="isShowClear"
     @click="clear">清除已完成</button>
     <!-- 点击事件清除完成的 -->
  </footer>
</template>

<script>
export default {
props:{
  list:{
    type:Array,
    required:true
  },
  type:String
},
computed:{
  leftCount(){
    //拥挤未完成的任务数量
  return this.list.filter(item => !item.isDone).length
  },
  isShowClear(){
    return this.list.some(item => item.isDone)
  }
},
methods:{
  clear(){
    //清空已经完成的任务  过滤，保留未完成的任务
    this.$emit('clear')
  }
}
}
</script>